<template>
    <div class="dashboard-container">
        <tool @upload="queryFn"></tool>
        <tableList v-loading="loading" :tableData="tableData"></tableList>
        <div class="pagination">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.pageIndex"
                    :page-sizes="[20, 50, 100, 200]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
  import tool from './tool'
  import tableList from './tableList'
  import { getList } from '@/api/version'

  export default {
    name: 'version',
    components: {
      tool,
      tableList
    },
    data () {
      return {
        tableData: [],
        pagination: {
          pageIndex: 1,
          pageSize: 20,
          total: 0
        },
        loading: false
      }
    },
    methods: {
      handleSizeChange (val) {
        this.pagination.pageSize = val
        this.get()
      },
      handleCurrentChange (val) {
        this.pagination.pageIndex = val
        this.get()
      },
      queryFn () {
        this.pagination.pageIndex = 1
        this.get()
      },
      async get () {
        try {
          this.loading = true
          const params = {
            ...this.pagination
          }
          delete params.total
          const response = await getList(params)
          this.tableData = response.data
          this.pagination.total = response.total
          this.loading = false
        } catch (e) {
          this.loading = false
          console.log(e)
        }
      }
    },
    mounted () {
      this.get()
    }
  }
</script>

<style lang="scss" scoped>

</style>
